<template>
  <div class="customer">
    <!--筛选-->
    <div class="wechat_search">
      <div class="search_top">
        <!--是否添加微信-->
        <div class="search_list">
          <span class="search_text">是否添加微信：</span>
          <el-select v-model="isWechat" placeholder="请选择" clearable>
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="item in Wechat"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!--是否成功添加了微信-->
        <div class="search_list">
          <span class="search_text">是否成功添加微信：</span>
          <el-select v-model="isSuccess" placeholder="请选择" clearable>
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="item in Success"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!--是否是有效沟通-->
        <div class="search_list">
          <span class="search_text">是否是有效沟通：</span>
          <el-select v-model="isCommunicate" placeholder="请选择" clearable>
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="item in Communicate"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!--客户分级-->
        <div class="search_list">
          <span class="search_text">客户分级：</span>
          <el-select v-model="clientGrade" placeholder="请选择" clearable>
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="item in clientGrades"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <!--查询-重置-->
      <div class="search_bottom">
        <div class="search_name">
          <el-input v-model="doctorValue" placeholder="姓名、医院、科室"></el-input>
        </div>
        <div class="search_button">
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="search_customer_list">查询</el-button>
        </div>
      </div>
    </div>
    <!--医生-->
    <div class="customer_list">
      <el-table
        :data="customer_list"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#E9EEF7',color:'#606266',height: '50px'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="doctorName"
          label="姓名" width="100">
        </el-table-column>
        <el-table-column
          prop="doctorHospital"
          show-overflow-tooltip
          label="医院">
        </el-table-column>
        <el-table-column
          prop="doctorDept"
          show-overflow-tooltip
          label="科室">
        </el-table-column>
        <el-table-column
          prop="productName"
          show-overflow-tooltip
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="productName"
          show-overflow-tooltip
          label="手机号">
          <template slot-scope="scope" v-if="scope.row.doctorContact && scope.row.doctorContact.length > 0">
            <div>
              <el-popover trigger="hover" placement="right">
                <div slot="reference">
                  <el-tag>{{ scope.row.doctorContactHide }}</el-tag>
                </div>
                <p>
                  {{ scope.row.doctorContact.toString()}}
                </p>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="isWechat"
          show-overflow-tooltip
          label="是否添加微信" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isWechat == 1">是</span>
            <span v-if="scope.row.isWechat == 0">否</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isSuccess"
          show-overflow-tooltip
          label="是否成功添加微信" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isSuccess == 1">是</span>
            <span v-if="scope.row.isSuccess == 0">否</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isCommunicate"
          show-overflow-tooltip
          label="是否有效沟通" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isCommunicate == 1">是</span>
            <span v-if="scope.row.isCommunicate == 0">否</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="clientGrade"
          show-overflow-tooltip
          label="客户分级" width="150">
          <template slot-scope="scope">
            <span v-for="Grades in clientGrades" v-if="scope.row.clientGrade == Grades.id">{{ Grades.label }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="communicateResult"
          show-overflow-tooltip
          label="沟通内容">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="edit(scope.row)">编辑
            </el-button>

            <!--            <el-button
                          type="text"
                          size="mini">最新电话详情
            &lt;!&ndash;              @click="telephoneRepresentativeClick(scope.row)">最新电话详情&ndash;&gt;
                        </el-button>-->
            <!--            <el-button
                          type="text"
                          size="mini">历史电话详情
            &lt;!&ndash;              @click="visitHistoryClick(scope.row)">历史电话详情&ndash;&gt;
                        </el-button>-->

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
    <!--编辑-->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px">
      <div class="edit">
        <el-row>
          <el-col :span="10">
            <p><span>代表ID：{{ editData.repId }}</span></p>
            <p><span>医生姓名：{{ editData.doctorName }}</span></p>
          </el-col>
          <el-col :span="14">
            <p><span>医生ID：{{ editData.doctorId }}</span></p>
            <p><span>所在科室：{{ editData.doctorDept }}</span></p>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <span class="sp sp_s">医院名称：</span>
          </el-col>
          <el-col :span="16">
            <span>{{ editData.doctorHospital }}</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <span class="sp">产品名称：</span>
          </el-col>
          <el-col :span="16">
            <el-select v-model="editData.product" placeholder="请选择" multiple collapse-tags>
              <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <span class="sp">是否添加微信：</span>
          </el-col>
          <el-col :span="16">
            <el-select v-model="editData.isWechat" placeholder="请选择">
              <el-option
                v-for="item in Wechat"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <span class="sp">是否成功添加微信：</span>
          </el-col>
          <el-col :span="16">
            <el-select v-model="editData.isSuccess" placeholder="请选择">
              <el-option
                v-for="item in Success"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <span class="sp">客户分级：</span>
          </el-col>
          <el-col :span="16">
            <el-select v-model="editData.clientGrade" placeholder="请选择">
              <el-option
                v-for="item in clientGrades"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <span class="sp">是否有效沟通：</span>
          </el-col>
          <el-col :span="16">
            <el-select v-model="editData.isCommunicate" placeholder="请选择">
              <el-option
                v-for="item in Communicate"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <p>添加沟通内容<i class="el-icon-circle-plus-outline icon" style="color: #67c23a" @click="add_communicate"></i></p>
        <el-row :gutter="20" v-for="(edit,index) in editData.timeAndResultList">
          <el-col :span="11">
            <el-date-picker
              v-model="edit.operationTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-col>
          <el-col :span="10">
            <el-input placeholder="沟通内容" v-model="edit.communicateResult"></el-input>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-circle-close icon" @click="delet_communicate(index,edit)"></i>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="modify">确认</el-button>
      </span>
    </el-dialog>
    <!--电话历史详情-->
    <el-dialog
      :visible.sync="telephoneRepresentative"
      :close-on-click-modal="false"
      width="70%">
      <div>
        <el-table
          :data="telephoneRepresentativeList"
          stripe
          style="width: 100%"
          :header-cell-style="{background:'#E9EEF7',color:'#606266',height: '50px'}"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="id"
            label="录音编号"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="operationTime"
            label="外呼时间"
            min-width="160">
          </el-table-column>
          <el-table-column
            prop="callDuration"
            label="时长"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="visitsNumber"
            label="拜访次数"
            min-width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="resultItem"
            label="拜访结果"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                style="color: orange"
                v-if="scope.row.tapeUrl==''"
                :disabled="scope.row.tapeUrl==''">未接听
              </el-button>
              <el-button
                type="text"
                size="mini"
                v-else
                @click="details(scope.index,scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="height: 45px;">
        <pagination :page="telephoneRepresentativePage"
                    @changeCurrentPage="telephoneRepresentativeChangePage"></pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {api, baseAjax, decryptMobile} from "../../api/api";
import {statusCode} from "../../utils";
import Cookies from "js-cookie";
import pagination from '../public/pagination';
import {formatDate} from "@/utils/validate";

export default {
  components: {
    pagination
  },
  data() {
    return {
      // 查询-重置
      doctorValue: '',
      //客户列表
      customer_list: [],
      //分页
      page: {
        currentPage: 1,    //当前页
        pageSize: 10,    //每页显示条数
        totalPage: null,   //总页数
        total: null   //总条数
      },
      //产品名称
      productList: [],
      //  是否添加微信
      isWechat: '',
      Wechat: [
        {
          id: 1,
          label: '是'
        },
        {
          id: 0,
          label: '否'
        }
      ],
      //  是否成功添加了微信
      isSuccess: '',
      Success: [
        {
          id: 1,
          label: '是'
        },
        {
          id: 0,
          label: '否'
        }
      ],
      //  客户分级
      clientGrade: '',
      clientGrades: [
        {
          id: -1,
          label: '未知'
        },
        {
          id: 0,
          label: '已经上传了患者的医生'
        },
        {
          id: 1,
          label: '现在手里有患者的医生'
        },
        {
          id: 2,
          label: '现在手里没有患者但是态度积极的医生'
        },
        {
          id: 3,
          label: '加了微信的医生'
        },
        {
          id: 4,
          label: '有意向加入但是没有加微信的医生'
        },
        {
          id: 5,
          label: '异常情况'
        }
      ],
      //  是否是有效沟通
      isCommunicate: '',
      Communicate: [
        {
          id: 1,
          label: '是'
        },
        {
          id: 0,
          label: '否'
        }
      ],
      //  编辑
      dialogVisible: false,
      editData: {
        id: '',
        repId: '',
        doctorId: '',
        doctorName: '',
        doctorHospital: '',
        doctorDept: '',
        isWechat: '',
        isSuccess: '',
        isCommunicate: '',
        clientGrade: '',
        product: [],
        timeAndResultList: [],
        productIdAndWechatTokenList: [],
      },
      //查看电话拜访详情
      telephoneRepresentativeList: [],
      telephoneRepresentative: false,
      everyCustomer: {},
      telephoneRepresentativePage: {
        currentPage: 1,    //当前页
        pageSize: 10,    //每页显示条数
        totalPage: 0,   //总页数
        count: 0   //总条数
      },

      //
      arr: [],
    }
  },
  mounted() {
    this.getMyCustomerList();
  },
  methods: {
    //获取客户列表数据
    getMyCustomerList() {
      let _this = this;
      let user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      let data = {
        repId: user_info.repId,
        doctorValue: this.doctorValue,
        isWechat: this.isWechat === 'all' ? "" : this.isWechat,
        isSuccess: this.isSuccess === 'all' ? "" : this.isSuccess,
        isCommunicate: this.isCommunicate === 'all' ? "" : this.isCommunicate,
        clientGrade: this.clientGrade === 'all' ? "" : this.clientGrade,
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        totalPage: this.page.totalPage,
      };
      baseAjax(api.weixin_customer_list, data, (res) => {
        if (res.code === statusCode.success) {
          let {value, currentPage, pageSize, totalPage, count} = res.data;
          _this.customer_list = value;
          value.forEach(item => {
            if (item.doctorContact) {
              if (item.doctorContact.split(',').length > 1) {
                this.arr = []
                item.doctorContact.split(',').forEach(item => {
                  decryptMobile(item).then((res) => {
                    if (res.data.code === statusCode.success) {
                      return res.data.data
                    }
                  }).then(resData => {
                    this.arr.push(resData)
                  })
                })
                item.doctorContact = this.arr
              } else {
                decryptMobile(item.doctorContact).then((res) => {
                  if (res.data.code === statusCode.success) {
                    item.doctorContact = res.data.data
                  }
                })
              }
            }
          });
          _this.page.currentPage = currentPage;  //当前页
          _this.page.pageSize = pageSize;  //每页条数
          _this.page.totalPage = totalPage;  //总页数
          _this.page.total = count;  //总条数
        }
      });
    },
    //查询客户信息
    search_customer_list() {
      this.getMyCustomerList()
    },
    //重置搜索列表
    resetSearch() {
      this.doctorValue = '';
      this.isWechat = '';
      this.isSuccess = '';
      this.isCommunicate = '';
      this.clientGrade = '';
      this.getMyCustomerList();
    },
    //修改列表tr颜色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'success_row';
      }
      return '';
    },
    //改变当前页码
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getMyCustomerList();
    },
    //改变每页条数
    handlePageSize(pageSize){
      this.page.pageSize = pageSize;
      this.getMyCustomerList();
    },
    //编辑
    edit(row) {
      this.editData.product = [];
      this.editData.timeAndResultList = [];
      this.editData.productIdAndWechatTokenList = [];
      this.productList = [];
      api.consult_weixin_doctor = {
        url: api.consult_weixin_doctor_url + row.id,
        method: api.consult_weixin_doctor.method
      };
      baseAjax(api.consult_weixin_doctor, '', (res) => {
        if (res.code == 200) {
          this.editData.id = res.data.id;
          this.editData.repId = res.data.repId;
          this.editData.doctorId = res.data.doctorId;
          this.editData.doctorName = res.data.doctorName;
          this.editData.doctorHospital = res.data.doctorHospital;
          this.editData.doctorDept = res.data.doctorDept;
          //所有产品
          for (let i in res.data.productList) {
            this.productList.push({
              id: res.data.productList[i].id,
              label: res.data.productList[i].name
            })
          }
          //选中产品
          for (let i in res.data.rdpList) {
            this.editData.product.push(Number(res.data.rdpList[i].id))
          }
          this.editData.isWechat = res.data.isWechat;
          this.editData.isSuccess = res.data.isSuccess;
          this.editData.isCommunicate = res.data.isCommunicate;
          this.editData.clientGrade = res.data.clientGrade;
          if (res.data.wechatRecordResultList != null) {
            this.editData.timeAndResultList = res.data.wechatRecordResultList;
          }
          for (let i in res.data.rdpList) {
            this.editData.productIdAndWechatTokenList.push({
              productId: Number(res.data.rdpList[i].id),
              wechatToken: res.data.rdpList[i].wechatToken,
            })
          }
          this.dialogVisible = true;
        }
      });
    },
    //添加
    add_communicate() {
      this.editData.timeAndResultList.push({
        id: '',
        repId: '',
        doctorId: '',
        operationTime: '',
        communicateResult: '',
      })
    },
    //删除
    delet_communicate(index, edit) {
      this.editData.timeAndResultList.splice(index, 1);
      api.edit_weixin_delete = {
        url: api.edit_weixin_delete_url + Number(edit.id),
        method: api.edit_weixin_delete.method
      };
      baseAjax(api.edit_weixin_delete, '', (res) => {
        if (res.code == 200) {
          this.$message({message: '删除成功！', type: 'success'});
        }
      });
    },
    //编辑修改
    modify() {
      let data = {};
      data.repId = this.editData.repId;
      data.doctorId = this.editData.doctorId;
      data.isWechat = this.editData.isWechat;
      data.isSuccess = this.editData.isSuccess;
      data.isCommunicate = this.editData.isCommunicate;
      data.clientGrade = this.editData.clientGrade;
      //产品
      data.productIdAndWechatTokenList = [];
      if (this.editData.product.length > 0) {
        for (let a of this.editData.product) {
          if (this.editData.productIdAndWechatTokenList.length > 0) {
            for (let b of this.editData.productIdAndWechatTokenList) {
              if (b.productId == a && b.wechatToken != '') {
                data.productIdAndWechatTokenList.push(b)
              } else {
                data.productIdAndWechatTokenList.push({
                  productId: a,
                  wechatToken: ''
                })
              }
            }
          } else {
            data.productIdAndWechatTokenList.push({
              productId: a,
              wechatToken: ''
            })
          }
        }
      }
      if (data.productIdAndWechatTokenList.length != this.editData.product.length) {
        let List = [];
        for (let c of data.productIdAndWechatTokenList) {
          if (c.wechatToken != '') {
            List.push(c)
          }
        }
        data.productIdAndWechatTokenList = List
      }
      //沟通内容
      data.timeAndResultList = [];
      if (this.editData.product.length > 0) {
        for (let i in this.editData.timeAndResultList) {
          data.timeAndResultList.push({
            id: this.editData.timeAndResultList[i].id,
            repId: this.editData.repId,
            doctorId: this.editData.doctorId,
            operationTime: this.editData.timeAndResultList[i].operationTime,
            communicateResult: this.editData.timeAndResultList[i].communicateResult,
          })
        }
        if (data.timeAndResultList.length > 0) {
          let isYes_Wrong = '';
          for (let a of data.timeAndResultList) {
            if (a.operationTime == '' || a.operationTime == null) {
              isYes_Wrong = false
              break
            } else {
              isYes_Wrong = true
            }
          }
          if (isYes_Wrong) {
            this.http_post(data)
          } else {
            this.$message.error('时间不能为空');
          }
        } else {
          this.http_post(data)
        }
      } else {
        this.$message.error('请选择产品！');
      }
    },
    http_post(data) {
      baseAjax(api.edit_weixin_customer, data, (res) => {
        if (res.code === statusCode.success) {
          if (res.data) {
            this.dialogVisible = false;
            this.getMyCustomerList();
            this.$message.success('修改成功！');
          }
        }
      });
    },
    //最新电话详情
    telephoneRepresentativeClick(row) {
      api.telephoneRepresentative = {
        url: '/call_record_info/details/' + row.doctorId,
        method: 'GET'
      }
      baseAjax(api.telephoneRepresentative, '', (res) => {
        if (res.code === statusCode.success) {
          if (res.data.callRecordResult.length) {
            res.data.callRecordResult = res.data.callRecordResult.join(',');
          }
          if (res.data.callRecordPurpose.length) {
            res.data.callRecordPurpose = res.data.callRecordPurpose.join(',');
          }
          if (res.data.callRecordTag.length) {
            res.data.callRecordTag = res.data.callRecordTag.join(',');
          }
          Cookies.set('visit_result_info', JSON.stringify(res.data), {expires: 24 * 60 * 60 * 1000});
          this.$router.push('/visit_result_info');
        }
      });
    },
    //拜访历史详情
    visitHistoryClick(row) {
      this.everyCustomer = row;
      this.httpGet()
    },
    //拜访历史详情分页
    telephoneRepresentativeChangePage(currentPage) {
      this.telephoneRepresentativePage.currentPage = currentPage;
      this.httpGet();
    },
    httpGet() {
      let data = 'doctorId=' + this.everyCustomer.doctorId + '&currentPage=' + this.telephoneRepresentativePage.currentPage + '&totalPage=' + this.telephoneRepresentativePage.totalPage + '&pageSize=' + this.telephoneRepresentativePage.pageSize;
      api.history_visit_detail = {
        url: api.history_visit_detail_url + '?' + data,
        method: api.history_visit_detail.method
      }
      baseAjax(api.history_visit_detail, '', (res) => {
        if (res.code === statusCode.success) {
          let {value, count, currentPage, pageSize, totalPage} = res.data;
          this.telephoneRepresentativeList = value;
          this.telephoneRepresentativeList.forEach(item => {
            item.purposeItem = item.purposeItem ? item.purposeItem : '无';
            item.resultItem = item.resultItem ? item.resultItem : '无';
            item.visitsNumber = item.visitsNumber ? item.visitsNumber : '无';
          });
          this.telephoneRepresentativePage.count = count;
          this.telephoneRepresentativePage.currentPage = currentPage;
          this.telephoneRepresentativePage.pageSize = pageSize;
          this.telephoneRepresentativePage.totalPage = totalPage;
          this.telephoneRepresentative = true;
        } else if (res.code === statusCode.not_login) {
          this.$alert('用户未登录,请重新登录').then(() => {
            this.$store.dispatch('user/resetToken').then(() => {
              location.reload()  // 为了重新实例化vue-router对象 避免bug
            })
            this.$router.replace('/login');
          });
        }
      });

    },
    //电话代表每次拜访详情
    details(index, row) {
      api.details = {
        url: '/call_record_info/history/details/' + row.sinToken,
        method: 'GET'
      }
      baseAjax(api.details, '', (res) => {
        if (res.code === statusCode.success) {
          if (res.data) {
            if (res.data.callRecordResult.length) {
              res.data.callRecordResult = res.data.callRecordResult.join(',');
            }
            if (res.data.callRecordPurpose.length) {
              res.data.callRecordPurpose = res.data.callRecordPurpose.join(',');
            }
            if (res.data.callRecordTag.length) {
              res.data.callRecordTag = res.data.callRecordTag.join(',');
            }
            Cookies.set('visit_result_info', JSON.stringify(res.data), {expires: 24 * 60 * 60 * 1000});
            this.$router.push('/visit_result_info');
          } else {
            this.$alert('代表没有填写电话拜访信息！', {
              dangerouslyUseHTMLString: true
            });
          }
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.customer {
  .wechat_search {
    .search_top {
      display: flex;
      flex-wrap: wrap;

      .search_list {
        display: flex;
        margin-bottom: 15px;
        align-items: center;

        .search_text {
          margin-right: 11px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }

        /deep/ .el-select {
          margin-right: 13px;

          .el-input {
            input {
              width: 151px !important;
              height: 34px !important;
            }
          }
        }

        /deep/ .visited_result {
          .el-input {
            .el-input__inner {
              width: 174px !important;
            }
          }
        }

        /deep/ .label {
          .el-input {
            .el-input__inner {
              width: 223px !important;
            }
          }
        }
      }
    }

    .search_bottom {
      display: flex;
      margin-bottom: 15px;

      .search_name {
        margin-right: 10px;

        /deep/ .el-input {
          .el-input__inner {
            height: 34px;
            width: 267px;
          }
        }
      }

      .search_button {
        display: flex;
        align-items: center;

        .el-button {
          width: 65px;
          height: 34px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .customer_list {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;

    /deep/ .el-table {
      color: #3B4859;

      thead {
        color: #3B4859;
      }

      th, td {
        text-align: center;
      }

      .success_row {
        background-color: #F8F9FB !important;
      }

      .cell {
        .name-wrapper {
          span {
            color: #000;
          }
        }
      }
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: none;
    }
  }

  .edit {
    font-size: 15px;
    font-weight: bold;

    .sp_s {
      display: inline-block;
      margin-bottom: 20px;
    }

    p {
      .sp {
        display: inline-block;
        width: 140px;
      }

      .sp2 {
        vertical-align: top;
      }


      .el-textarea {
        width: 195px;
      }
    }
  }

  .el-row {
    margin-bottom: 8px;
  }
}

.el-date-picker {
  width: 100% !important;
}

.el-input {
  width: 100% !important;
}

.icon {
  font-size: 30px;
  vertical-align: middle;
  line-height: 40px
}
</style>
